<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选择人员</title>
	<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" />
	<link rel="stylesheet" type="text/css" href="../css/main-page.css" />
	<script type="text/javascript" src="../easyui/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../js/win.js"></script>
	<script type="text/javascript">
		function initDragItem(){
			$('.drag-item').draggable({
				revert:true,
				deltaX:10,
				deltaY:10
			});
		}
		
		function initTdDragItem(td){
			$(td).find('.drag-item').draggable({
				revert:true,
				deltaX:10,
				deltaY:10
			});
		}
		
		function initDropItem(){
			$("td").droppable({
				onDragOver:function(e,source){
					$(this).css("background-color", "#e8f3fd");
				},
				onDragLeave:function(e,source){
					$(this).css("background-color", "");
				},
		    	onDrop:function(e,source){
		    		var cloneSource = $(source).clone();
	    			$(this).append(cloneSource);
	    			initTdDragItem(this);
	    			$(this).css("background-color", "");
		    	}
		    });
		}
		
		function initDeletePlace(){
			$("#delPlace").droppable({
				onDragOver:function(e,source){
					$(this).css("background-color", "#8A8A8A");
				},
				onDragLeave:function(e,source){
					$(this).css("background-color", "");
				},
		    	onDrop:function(e,source){
		    		$(source).remove();
		    		$(this).css("background-color", "");
		    	}
		    });		
		}
		
		function initMeetingPlans(){
			var date = '';
			var type = '';
			var meetingPlace = '';
			$("td").each(function(){
				date = $(this).attr("dt");
				type = $(this).attr("type");
				meetingPlace = $(this).attr("meetingPlace");
				var _this = this;
				$.ajax({
					   type: "POST",
					   url: "../meetingPlan/initMeetingPlan.do",
					   dataType: "json",
					   data : {date:date, type:type, meetingPlaceId:meetingPlace },
					   success: function(users){
						   var dragContent = "";
					   		for(var i = 0; i < users.length; i++){
					   			dragContent += "<div class='drag-item' id='"+users[i].id +"'>" + users[i].name +"</div>";
					   		}
					   		$(_this).append(dragContent);
					   		initTdDragItem(_this);
					   }
					});
			});
		}
	
		$(function(){
			$("#month").combobox("setValue", '<s:property value="month"/>' );
			initDragItem();
			initDropItem();
			initDeletePlace();
			initMeetingPlans();
			initMonth();
		});

		function initMonth(){
			$("#month").combobox({
				onSelect : function(record){
					parent.setFrameSrc("../meetingPlan/initPlanPage.do?opt=edit&month="+record.value);
				}
			});
		};
		
		function saveMeetingPlan(){
			var plans = "";
			
			var date = '';
			var type = '';
			var meetingPlace = '';
			var userId = '';
			$("td").each(function(){
				var _this = this;
				userId = '';
				date = $(this).attr("dt");
				type = $(this).attr("type");
				meetingPlace = $(this).attr("meetingPlace");
				$(this).find('.drag-item').each(function(){
					userId += this.id + ',';
				});
				plans += date + "&" + meetingPlace + "&" + type +"&" + userId +";";
			});
			$.ajax({
			   type: "POST",
			   url: "../meetingPlan/saveMeetingPlans.do",
			   dataType: "text",
			   data : {plans:plans},
			   success: function(msg){
				   $.messager.alert("提示", alertPrefix + "保存成功!", 'info');
			   }
			});
		}
	</script>
	<style type="text/css">
		.drag-item{
			border: 1px solid #CCCCCC;
			margin: 2px;
			text-align:center;
			background-color: #F8F8F8;
			width: 45px;
			height: 20px;
			line-height: 20px;
			float: left;
		}
		.group-leader{
			border: 1px solid #CCCCCC;
			margin: 2px;
			text-align:center;
			background-color: #F8F8F8;
			width: 45px;
			height: 20px;
			line-height: 20px;
			float: left;
			color: blue;
		}
		table{
			width: 100%;
        	border-collapse: collapse;
        	cellspacing:0;
		}
		th{
			border: 1px solid #9DB3C5;
			font-weight: normal;
			text-align: center;
			background-color:#e8f3fd;
			height: 25px;
		}
		td{
			border: 1px solid #9DB3C5;
			text-align: center;
			height: 30px;
			width: 95px;
		}
	</style>
</head>
<body class="easyui-layout">
	<div data-options="region:'center',border:false" style="padding: 5px" id="dropArea">
		<table>
			<thead>
				<tr>
					<th rowspan="2" width="80px">时间</th>
					<s:iterator value="meetingPlaces">
						<th colspan='<s:property value="types.size"/>'>
							<s:property value="place"/>
						</th>
				 	</s:iterator>
				 </tr>
				 <tr>
				 	<s:iterator value="meetingPlaces" var="mp">
						<s:iterator value="types">
							<th><s:property value="key"/></th>
						</s:iterator>
				 	</s:iterator>
				 </tr>    
			</thead>
			<tbody>
				<s:iterator value="dates" var='d'>
					<tr>
						<th><s:property /></th>
						<s:iterator value="meetingPlaces" var='mp'>
							<s:iterator value="types" var='t'>
								<td meetingPlace='<s:property value="#mp.id"/>' 
									type='<s:property value="#t.value"/>' 
									dt='<s:property value="#d"/>'></td>	
							</s:iterator>
				 		</s:iterator>
					</tr>
				</s:iterator>
			</tbody>
		</table>
	</div>
	<div data-options="region:'west',border:false" style="width: 200px;padding: 5px">
		<div style="padding-bottom: 5px;">
		<div class="easyui-panel" title='删除位置'>
			<div style="height: 30px;" id="delPlace"></div>
		</div>
		</div>
		<s:iterator value="groupUsers" var="gu">
			<div style="padding-bottom: 5px;">
			<div class="easyui-panel" title='<s:property value="key"/>'>
				<s:iterator value="#gu.value">
					<div class='drag-item' id='<s:property value="id"/>'><s:property value="name"/></div>
				</s:iterator>
			</div>
			</div>
		</s:iterator>
	</div>
	<div data-options="region:'north'" class='fm-btn' style="text-align: left;">
		<select class="easyui-combobox" id="month"
			data-options="panelHeight: 'auto'" style="width: 150px">
			<option value="0">一月</option>
			<option value="1">二月</option>
			<option value="2">三月</option>
			<option value="3">四月</option>
			<option value="4">五月</option>
			<option value="5">六月</option>
			<option value="6">七月</option>
			<option value="7">八月</option>
			<option value="8">九月</option>
			<option value="9">十月</option>
			<option value="10">十一月</option>
			<option value="11">十二月</option>
		</select>
		<a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="saveMeetingPlan()">保存</a>
	</div>
</body>
</html>